// 存储图片数据
var saveImgData = {
    url: 'test.jpg',
    text: '2023第一期造价员就业班合影',
    textImg: '',
    w: 1920,
    h: 1280,
    t: 0,
    l: 0
}

var moving_canvas_img = document.createElement('img');
moving_canvas_img.src = saveImgData.url;

var canvas = document.getElementById('posterPanel');
var ctx = canvas.getContext('2d');
changeText(saveImgData.text);
changeImg(saveImgData.url);

// 修改文本
function changeText(text){
    ctx.fillStyle = "#29166f";
    ctx.fillRect(0, 0, 1920, 135);

    ctx.font = '110px 华文楷体';
    ctx.textAlign = 'center';
    ctx.fillStyle = "#ffffff";
    ctx.fillText(text, 960, 100); // 设置文本样式
    saveImgData.textImg = ctx.getImageData(0, 0, 1920, 135);
    saveImgData.text = text;
}

// 修改图片
function changeImg(url){
    var saveText = ctx.getImageData(0, 0, 1920, 135);
    saveImgData.textImg = saveText;
    var img = document.createElement('img');
    img.src = url;
    img.onload = function(){
        ctx.drawImage(img, 0, 0, 1920, 1280);
        ctx.putImageData(saveText, 0, 0);
    }
}

// 上传图片
document.getElementById('uploadPictures_btn').addEventListener('click', function(){
    // data参数是传回来的内容
    hy_uploadPictures({ batch: false }, function(data){
        saveImgData.url = data[0].imgUrl;
        hy_pictureResizing(data[0].imgUrl, function(imgData){
            // 还原文字区域
            ctx.putImageData(imgData.text, 0, 0);
            
            saveImgData.textImg = imgData.text;

            // 更新操作栏样式
            var operationEl = document.getElementById('operationPanel');
            operationEl.style.width = imgData.w + 'px';
            operationEl.style.height = imgData.h + 'px';
            operationEl.style.top = imgData.t + 'px';
            operationEl.style.left = imgData.l + 'px';
            saveImgData.w = imgData.w;
            saveImgData.h = imgData.h;
            saveImgData.l = imgData.l;
            saveImgData.t = imgData.t;
            saveImgData.url = data[0].imgUrl;
            moving_canvas_img.src = data[0].imgUrl;
        });
    });
});

// 图片自适应
document.getElementById('sizeAdaptation_btn').addEventListener('click', function(){
    hy_pictureResizing(saveImgData.url, function(imgData){
        // 还原文字区域
        ctx.putImageData(imgData.text, 0, 0);
        
        // saveImgData.textImg = imgData.text;

        // 更新操作栏样式
        var operationEl = document.getElementById('operationPanel');
        operationEl.style.width = imgData.w + 'px';
        operationEl.style.height = imgData.h + 'px';
        operationEl.style.top = imgData.t + 'px';
        operationEl.style.left = imgData.l + 'px';
        saveImgData.w = imgData.w;
        saveImgData.h = imgData.h;
        saveImgData.l = imgData.l;
        saveImgData.t = imgData.t;
    });
});

// 图片尺寸调整
function hy_pictureResizing(url, callbackFunction){
    // 保存文字区域
    var saveText = ctx.getImageData(0, 0, 1920, 135);

    var resizeCanvas = document.createElement('canvas');
    resizeCanvas.width = 1920;
    resizeCanvas.height = 1280;
    var clippingCtx = resizeCanvas.getContext('2d');

    var img = document.createElement('img');
    img.src = url;
    img.onload = function(){
        var img_w = img.width;
        var img_h = img.height;

        // 得到图片宽、高、x轴、y轴的值
        var proportion = 1;
        var w = 0;
        var h = 0;
        if(img_w > 1920 || img_h > 1280){
            // 比较正弦
            if((img_h / img_w) < (1920 / 1280)){
                proportion = 1920 / img_w;
            }else{
                proportion = 1280 / img_h;
            }

            w = img_w * proportion;
            h = img_h * proportion;
        }else{
            w = img_w;
            h = img_h;
        }
        
        var t = (1280 - h) / 2;
        var l = (1920 - w) / 2;

        // 把图片数据填回到面板显示
        clippingCtx.drawImage(img, l, t, w, h);
        var getBase64 = clippingCtx.getImageData(0, 0, 1920, 1280);
        ctx.putImageData(getBase64, 0, 0);

        if(callbackFunction){
            var jsonData = {
                url: url,
                text: saveText,
                w: w,
                h: h,
                t: t,
                l: l
            }
            callbackFunction(jsonData);
        }
    }
}

// 图片移动
function hy_image_moving(imgJson, callback){
    var movingCanvas = document.createElement('canvas');
    movingCanvas.width = 1920;
    movingCanvas.height = 1280;
    var movingCtx = movingCanvas.getContext('2d');

    var img = document.createElement('img');
    img.src = imgJson.url;
    img.onload = function(){
        movingCtx.drawImage(img, imgJson.l, imgJson.t, imgJson.w, imgJson.h);
        var getBase64 = movingCtx.getImageData(0, 0, 1920, 1280);
        ctx.putImageData(getBase64, 0, 0);
        ctx.putImageData(saveImgData.textImg, 0, 0);

        if(callback){
            callback();
        }
    }
}

var moving_canvas = document.createElement('canvas');
moving_canvas.width = 1920;
moving_canvas.height = 1280;
var moving_canvas_ctx = moving_canvas.getContext('2d');
// 图片向上移动
function hy_image_moving_top(){
    var t = saveImgData.t - 1;
    saveImgData.t = t;
    $('#operationPanel').css({
        'top': t + 'px'
    });
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 1920, 1280);
    ctx.drawImage(moving_canvas_img, saveImgData.l, t, saveImgData.w, saveImgData.h);
    ctx.putImageData(saveImgData.textImg, 0, 0);
}

// 图片向下移动
function hy_image_moving_bottom(){
    $('#operationPanel').removeClass('mousedown');
    var t = saveImgData.t + 1;
    saveImgData.t = t;
    $('#operationPanel').css({
        'top': t + 'px'
    });
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 1920, 1280);
    ctx.drawImage(moving_canvas_img, saveImgData.l, t, saveImgData.w, saveImgData.h);
    ctx.putImageData(saveImgData.textImg, 0, 0);
}

// 图片向左移动
function hy_image_moving_left(){
    $('#operationPanel').removeClass('mousedown');
    var l = saveImgData.l - 1;
    saveImgData.l = l;
    $('#operationPanel').css({
        'left': l + 'px'
    });
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 1920, 1280);
    ctx.drawImage(moving_canvas_img, l, saveImgData.t, saveImgData.w, saveImgData.h);
    ctx.putImageData(saveImgData.textImg, 0, 0);
}

// 图片向右移动
function hy_image_moving_right(){
    $('#operationPanel').removeClass('mousedown');
    var l = saveImgData.l + 1;
    saveImgData.l = l;
    $('#operationPanel').css({
        'left': l + 'px'
    });
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 1920, 1280);
    ctx.drawImage(moving_canvas_img, l, saveImgData.t, saveImgData.w, saveImgData.h);
    ctx.putImageData(saveImgData.textImg, 0, 0);
}
        
// 图片移动
var canvasBox = document.getElementById('canvasBox');
var panelEl = document.getElementById('operationPanel');
var moveEl = document.getElementById('operationMove');
var zlt_El = document.getElementById('zoom_left_top');
var zrt_El = document.getElementById('zoom_right_top');
var zlb_El = document.getElementById('zoom_left_bottom');
var zrb_El = document.getElementById('zoom_right_bottom');

// 图片移动操作
$(document).on('mousedown', '#operationMove', function(e){    
    $('#operationPanel').addClass('mousedown');
    $(this).attr('style', 'background-image: url(' + saveImgData.url + ')');
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 1920, 1280);
    changeText(saveImgData.text);
    var initX = e.pageX;
    var initY = e.pageY;

    //获取内嵌样式表和外部样式表中CSS的值
    var getZoom = parseFloat($('#canvasBox').css('zoom'));
    if(!getZoom || getZoom == undefined){
        getZoom = 1;
    }
    var getTop = parseFloat($('#operationPanel').css('top'));
    if(!getTop || getTop == undefined){
        getTop = 0;
    }
    var getLeft = parseFloat($('#operationPanel').css('left'));
    if(!getLeft || getLeft == undefined){
        getLeft = 0;
    }
    var getWidth = parseFloat($('#operationPanel').outerWidth());
    if(!getWidth || getWidth == undefined){
        getWidth = 0;
    }
    var getHeight = parseFloat($('#operationPanel').outerHeight());
    if(!getHeight || getHeight == undefined){
        getHeight = 0;
    }

    // 移动时调用的函数
    var x = 0;
    var y = 0;
    var t = 0;
    var l = 0;
    var zoom_t = getTop;
    var zoom_l = getLeft;

    $(document).off('mousemove').on('mousemove', function(e){
        x = e.pageX - initX;
        y = e.pageY - initY;

        t = y + getTop;
        l = x + getLeft;
        
        zoom_t = (y / getZoom) + getTop;
        zoom_l = (x / getZoom) + getLeft;

        // 更新操作栏样式
        $('#operationPanel').css({
            'top': zoom_t + 'px',
            'left': zoom_l + 'px'
        });
    });
    
    $(document).off('mouseup').on('mouseup', function(e){
        $(document).off('mousemove');
        // 更新图片位置
        hy_image_moving({
            url: saveImgData.url,
            textImg: saveImgData.textImg,
            w: getWidth,
            h: getHeight,
            t: zoom_t,
            l: zoom_l,
        },function(){
            $('#operationMove').attr('style', 'background-image: url()');
            saveImgData.w = getWidth;
            saveImgData.h = getHeight;
            saveImgData.t = zoom_t;
            saveImgData.l = zoom_l;
            moving_canvas_img.src = saveImgData.url;
        });
    });

    e.preventDefault();
});

// 图片拉伸操作
$(document).on('mousedown', '#operationPanel .zoom-btn', function(e){
    $('#operationPanel').addClass('mousedown');
    $('#operationMove').attr('style', 'background-image: url(' + saveImgData.url + ')');
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 1920, 1280);
    changeText(saveImgData.text);
    var initX = e.pageX;
    var initY = e.pageY;

    //获取内嵌样式表和外部样式表中CSS的值
    var getZoom = parseFloat($('#canvasBox').css('zoom'));
    if(!getZoom || getZoom == undefined){
        getZoom = 1;
    }
    var getTop = parseFloat($('#operationPanel').css('top'));
    if(!getTop || getTop == undefined){
        getTop = 0;
    }
    var getLeft = parseFloat($('#operationPanel').css('left'));
    if(!getLeft || getLeft == undefined){
        getLeft = 0;
    }
    var getWidth = parseFloat($('#operationPanel').outerWidth());
    if(!getWidth || getWidth == undefined){
        getWidth = 0;
    }
    var getHeight = parseFloat($('#operationPanel').outerHeight());
    if(!getHeight || getHeight == undefined){
        getHeight = 0;
    }

    // 移动时调用的函数
    var x = 0;
    var y = 0;
    var t = getTop;
    var l = getLeft;
    var w = getWidth;
    var h = getHeight;
    var zoom_t = getTop;
    var zoom_l = getLeft;

    // var scale = getHeight / getWidth;

    var getType = $(this).attr('id');

    $(document).off('mousemove').on('mousemove', function(e){
        x = e.pageX - initX;
        y = e.pageY - initY;

        switch(getType){
            case 'zoom_left_top':
                w = getWidth - (x / getZoom);
                h = w / getWidth * getHeight;        
                zoom_t = (y / getZoom) + getTop;
                zoom_l = (x / getZoom) + getLeft;
                break;
            
            case 'zoom_right_top':
                w = getWidth + (x / getZoom);
                h = w / getWidth * getHeight;
                zoom_t = (y / getZoom) + getTop;
                zoom_l = getLeft;
                break;

            case 'zoom_left_bottom':
                w = getWidth - (x / getZoom);
                h = w / getWidth * getHeight;        
                zoom_t = getTop + (y / getZoom);
                zoom_l = (x / getZoom) + getLeft;
                break;

            case 'zoom_right_bottom':
                w = getWidth + (x / getZoom);
                h = w / getWidth * getHeight;        
                zoom_t = getTop;
                zoom_l = getLeft;
                break;
            
            default:
                break;
        }

        // 更新操作栏样式
        if(w > 200 || h > 200){
            $('#operationPanel').css({
                'width': w + 'px',
                'height': h + 'px',
                'top': zoom_t + 'px',
                'left': zoom_l + 'px'
            });
        }
    });
    
    $(document).off('mouseup').on('mouseup', function(e){
        $(document).off('mousemove');
        $('#operationMove').attr('style', 'background-image: url()');
        hy_image_moving({
            url: saveImgData.url,
            textImg: saveImgData.textImg,
            w: w,
            h: h,
            t: zoom_t,
            l: zoom_l,
        },function(){
            $('#operationMove').attr('style', 'background-image: url()');
            saveImgData.w = w;
            saveImgData.h = h;
            saveImgData.t = zoom_t;
            saveImgData.l = zoom_l;
            saveImgData.url = saveImgData.url;
        });
    });

    e.preventDefault();
});

// 修改文本信息
document.getElementById('changeTextInfo').addEventListener('keyup', function(e){
    changeText(this.value.trim());
});

// 按方向键移动图片
document.addEventListener('keydown', function(e){
    switch(e.keyCode){
        // 向上移动
        case 38:
            hy_image_moving_top();
            break;

        // 向下移动
        case 40:
            hy_image_moving_bottom();
            break;

        // 向左移动
        case 37:
            hy_image_moving_left();
            break;

        // 向右移动
        case 39:
            hy_image_moving_right();
            break;

        default:
            break;
    }
});

// 下载图片
document.getElementById('downloadPictures_btn').addEventListener('click', function(e){
    var url = canvas.toDataURL();
    var a = document.createElement('a');
    var img = document.createElement('img');
    img.src = url;
    img.onload = function(){
        a.href = url;
        a.download = saveImgData.text;
        a.click();
    }
});

// $(function(){
//     var win_w = $(window).outerWidth();
//     var win_h = $(window).outerHeight();
//     var canvas_w = $('#posterPanel').outerWidth();
//     var canvas_h = $('#posterPanel').outerHeight();
//     var w = 0;
//     var h = 0;
//     var zoomVal = 1;
//     if((canvas_h / canvas_w) < (win_h / win_w)){
//         w = win_w * 0.7;
//         h = (w / win_w) * canvas_h;
//         zoomVal = (1920 - w) / win_w;
//     }else{
//         h = win_h * 0.7;
//         w = (h / win_h) * canvas_w;
//         zoomVal = (1280 - h) / win_h;
//     }

//     console.log(zoomVal);

//     // $('#posterPanel').width(w);
//     // $('#posterPanel').height(h);
// });